<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="委托担保合同" :key="contractId" name="contract-first">
        <pdf-view
          :contract-id="contractId"
          :query-id="queryId"
          :sig-no="signNo"
          :view-mode="viewMode || +entrustContract.sign_status === 2"
        ></pdf-view>
      </el-tab-pane>
      <el-tab-pane label="反担保合同" name="contract-gua">
        <el-tabs style="max-width: 794px; margin: 0 auto" v-model="guaName" v-if="hasGuard">
          <el-tab-pane
            v-for="(guard, index) in guardDatas"
            :key="guard.doc_id"
            :name="`guard-${index}`"
          >
            <span
              slot="label"
              class="project-history"
              data-history="1"
              :data-label="enumContractType[guard.gua_method]"
            >
              {{
                +guard.gua_entity_type === 1
                  ? guard.gua_entity
                  : guard.gua_entity_corp || guard.gua_entity
              }}（{{ guard.gua_contract_no }}）
              <i class="fa fa-close text-danger" v-if="!guard.doc_id"></i>
              <i class="fa fa-check text-primary" v-else-if="+guard.sign_status === 2"></i>
              <i class="fa fa-minus text-muted" v-else></i>
            </span>

            <pdf-view
              :contract-id="guard.doc_id"
              :query-id="queryId"
              :sig-no="guard.sign_no"
              :view-mode="viewMode || +guard.sign_status === 2"
            ></pdf-view>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="合同附件">
        <div v-if="!attachs.length" class="p-5 text-center text-muted border rounded bg-light">
          暂无附件
        </div>
        <div class="w-50 pl-5">
          <div v-for="file of attachs" :key="file.url">
            <attach-item :attach-data="file"></attach-item>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import PdfView from '@/credit/views/county/unionProvince/components/PdfView'
// import { enumContractType } from '@/credit/views/county/unionProvince/components/contractApproveDeploy/ContractEdit'
import { arrayFromString } from '@vimi/utils-tool'
import { attachAdapter } from '@/bank/components/attach/index'
import AttachItem from '@/bank/components/attach/Item'
export default {
  components: {
    PdfView,
    AttachItem,
  },
  props: {
    queryId: String,
    viewMode: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      enumContractType: {
        1: '保',
        2: '质',
        3: '抵',
        4: '留',
      },
      activeName: 'contract-first',
      loading: false,
      guaName: 'guard-0',
    }
  },
  computed: {
    ...mapGetters(['entrustContract', 'guardDatas']),
    contractId() {
      return this.entrustContract.doc_id
    },
    signNo() {
      return this.entrustContract.sign_no
    },
    hasGuard() {
      return !!this.guardDatas.length
    },
    printId() {
      return `entrust-${this.queryId}`
    },
    attachs() {
      const datas = []
      this.guardDatas.forEach(item => {
        datas.push(
          ...arrayFromString(item.attachment).map(attachment => {
            return attachAdapter({ attachment: attachment })
          })
        )
        datas.push(
          ...arrayFromString(item.cert_attachment).map(attachment => {
            return attachAdapter({ attachment: attachment })
          })
        )
      })
      return datas
    },
  },
  watch: {
    queryId: {
      handler: function () {
        this.activeName = 'contract-first'
        this.guaName = 'guard-0'
        this.getData()
      },
      immediate: true,
    },
  },
  created() {},
  methods: {
    async getData() {
      if (!this.queryId) {
        return
      }
      this.loading = true
      await this.$utils.promise(
        Promise.all([
          this.$store.dispatch('getEntrustContract', this.queryId),
          this.$store.dispatch('getGuardsData', this.queryId),
        ])
      )
      this.loading = false
    },
  },
}
</script>
<style lang="scss" scoped>
.project-history[data-history='1']::before {
  content: attr(data-label);
  margin-right: 0rem;
}
</style>
